<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<body>

	<div>
		<!-- Nav tabs -->
		<ul class="nav nav-tabs" role="tablist" id="contentnavid">
			<li role="presentation" class="active"><a href="#tab1"
				aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>
			<li role="presentation"><a href="#tab2" aria-controls="tab2"
				role="tab" data-toggle="tab">tab2</a></li>
			<li role="presentation"><a href="#tab3" aria-controls="tab3"
				role="tab" data-toggle="tab">tab3</a></li>
			<li role="presentation" id="closetabli"><a href="#closetab"
				aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>
					<button type="button" class="close" aria-label="Close"
						id="closetabbtn">
						<span aria-hidden="true" style="color: red">×</span>
					</button> </a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="tab1">this is
				tab1</div>
			<div role="tabpanel" class="tab-pane active" id="tab2">this is
				tab2</div>
			<div role="tabpanel" class="tab-pane active" id="tab3">this is
				tab3</div>
			<div role="tabpanel" class="tab-pane active" id="closetab">this
				is closetab</div>
		</div>
	</div>
</body>

<script>
	var activeTab = "tab1"; //当前的tab页。默认为第一个tab页。
	var previousTab; //上一个打开的tab页。默认为空。
	$(function() {
		//实现事件响应函数，当tab页被显示时会触发
		$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
			//获取当前被显示的tab页标签的aria-controls属性值
			activeTab = $(e.target).attr("aria-controls");
			//获取前一个被显示的tab页标签的aria-controls属性值
			previousTab = $(e.relatedTarget).attr("aria-controls");
		});

		//点击带关闭按钮tab页标签上的x后的响应事件
		$("#closetabbtn").click(function(e) {
			$(this).parent().parent().css("display", "none"); //隐藏tab头，调用remove方法就是删除了
			$("#closetab").css("display", "none"); //隐藏tab正文信息，调用remove方法就是删除了
			if (activeTab == "closetab") { //判断当前tab页是否是带关闭按钮的tab页，如果是，则显示上次打开的tab页
				$('#contentnavid a[href="#' + previousTab + '"]').tab('show'); //显示tab页
			}
			return false; //一定要return false，阻止事件往上冒泡
		});
	});
</script>
</html>